<template>
  <div class="cart">
    <!-- 导航 -->
    <nav-bar class="nav_bar">
      <template #center>
        购物车({{cartLength}})
      </template>
    </nav-bar>

    <!-- 商品的列表 -->
    <cart-list></cart-list>

    <!-- 底部汇总 -->
    <cart-bottom-bar></cart-bottom-bar>
  </div>
</template>

<script>
import CartList from './childComps/CartList'
import CartBottomBar from './childComps/CartBottomBar'

import NavBar from 'components/common/navbar/NavBar'
// vuex提供了一个方法,可以直接用getters中的方法
import { mapGetters } from 'vuex'



export default {
  components: {
    NavBar,
    CartList,
    CartBottomBar
  },
  name: 'Cart',
  data() {
    return {

    };
  },
  computed: {
    // 两种语法
    ...mapGetters(['cartLength'])
    // ...mapGetters({
    //    'length': 'cartLength' 
    // })
  },
  created() {

  },
  mounted() {

  },
  methods: {

  }
};
</script>

<style scoped>
.cart {
  height: 100vh;
}

.nav_bar {
  background-color: var(--color-tint);
  color: #fff;
  font-weight: 600;
}
</style>
